<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入SweetAlert2 -->
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.min.css" rel="stylesheet">

    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4096ff',
                        neutral: {
                            100: '#f5f7fa',
                            200: '#e4e7ed',
                            300: '#dcdfe6',
                            400: '#c0c4cc',
                            500: '#909399',
                            600: '#606266',
                            700: '#303133',
                            800: '#1e1e1e',
                        },
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 2px 12px 0 rgba(0, 0, 0, 0.08)',
                    }
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }

            .login-card-shadow {
                box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
            }

            .input-focus {
                @apply focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none;
            }
        }
    </style>
</head>
<body class="bg-neutral-100 min-h-screen flex items-center justify-center font-inter">
<!-- 登录卡片 -->
<div class="w-full max-w-md px-4 py-8">
    <div class="bg-white rounded-xl login-card-shadow p-8 relative overflow-hidden">
        <!-- 装饰元素 -->
        <div class="absolute -top-10 -right-10 w-40 h-40 bg-primary/5 rounded-full"></div>
        <div class="absolute -bottom-16 -left-16 w-48 h-48 bg-primary/5 rounded-full"></div>

        <div class="relative">
            <!-- 登录标题 -->
            <div class="text-center mb-8">
                <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-neutral-700">用户登录</h1>
                <p class="text-neutral-500 mt-2">请输入账号密码登录系统</p>
            </div>

            <!-- 登录表单 -->
            <form id="loginForm" class="space-y-5">
                <!-- 用户名输入 -->
                <div class="space-y-2">
                    <label for="username" class="block text-sm font-medium text-neutral-600">用户名</label>
                    <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-400">
                                <i class="fa fa-user-o"></i>
                            </span>
                        <input
                                type="text"
                                id="username"
                                name="username"
                                placeholder="请输入用户名"
                                class="w-full pl-10 pr-4 py-3 border border-neutral-200 rounded-lg transition-all duration-300 input-focus"
                                required
                        >
                    </div>
                    <p class="error-message text-red-500 text-sm hidden">请输入用户名</p>
                </div>

                <!-- 密码输入 -->
                <div class="space-y-2">
                    <label for="password" class="block text-sm font-medium text-neutral-600">密码</label>
                    <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-400">
                                <i class="fa fa-lock"></i>
                            </span>
                        <input
                                type="password"
                                id="password"
                                name="password"
                                placeholder="请输入密码"
                                class="w-full pl-10 pr-10 py-3 border border-neutral-200 rounded-lg transition-all duration-300 input-focus"
                                required
                        >
                        <button type="button" id="togglePassword"
                                class="absolute inset-y-0 right-0 flex items-center pr-3 text-neutral-400 hover:text-neutral-600">
                            <i class="fa fa-eye-slash"></i>
                        </button>
                    </div>
                    <p class="error-message text-red-500 text-sm hidden">请输入密码</p>
                </div>

                <!-- 记住密码选项 -->
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <input type="checkbox" id="remember" name="remember"
                               class="w-4 h-4 text-primary border-neutral-300 rounded focus:ring-primary">
                        <label for="remember" class="ml-2 text-sm text-neutral-600">记住密码</label>
                    </div>
                    <a href="#" class="text-sm text-primary hover:text-primary/80 transition-colors">忘记密码?</a>
                </div>

                <!-- 登录按钮 -->
                <button
                        type="button"
                        id="loginButton"
                        class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-primary/50 flex items-center justify-center"
                >
                    <span>登录</span>
                    <i class="fa fa-spinner fa-spin ml-2 hidden"></i>
                </button>

                <!-- 注册链接 -->
                <div class="text-center text-sm text-neutral-500">
                    还没有账号? <a href="/view/register.html"
                                   class="text-primary hover:text-primary/80 font-medium">立即注册</a>
                </div>
            </form>
        </div>
    </div>

    <!-- 底部信息 -->
    <div class="text-center text-neutral-500 text-xs mt-6">
        © 2025 系统名称 版权所有
    </div>
</div>

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.min.js"></script>
<script src="../js/login.js"></script>
</body>
</html>
